<template lang="pug">
  el-drawer.commonDrawer(
    title="添加合同"
    :visible="visibleDialog"
    append-to-body
    direction="rtl"
    size="720px"
    @close="$_handleCancel"
  )
    .p16(style="padding-bottom: 0;padding-top: 0")
      form-box(
        :fields="searchFields"
        :submitting="searching"
        :isFilter="true"
        :submitHandle="searchHandle"
      )
    .drawer-content
      el-card.mb12.babyBox(v-for="baby in babyList" :key="baby.id" :bodyStyle="{ padding: '12px 16px'}")
        h2
          | 孩子姓名：{{baby.sysChildName}}
          el-tag.ml5(:type="dictFilter(baby.status, 'clientStatus', 'id', 'type')" size="small") {{dictFilter(baby.status, 'clientStatus', 'id', 'name')}}
          el-button.addBtn(size="mini" type="primary" @click="() => addHandle(baby)") 添加合同
        el-row(:gutter="24")
          el-col(:span="12")
            p 联系人：{{baby.name}}
          el-col(:span="12")
            p.tr 与孩子关系：{{baby.relationship}}
          el-col(:span="12")
            p 生日：{{baby.birthday | dateFilter}}
          el-col(:span="12")
            p.tr 联系电话：{{baby.mobile}}
        template(v-if="baby.contracts && baby.contracts.length > 0")
          alert.mt12(type="info" v-for="contract in baby.contracts" :key="contract.id")
            h3
              | {{contract.name}}
              el-tag.ml5(:type="dictFilter(contract.status, 'contractStatus', 'id', 'type')") {{dictFilter(contract.status, 'contractStatus', 'id', 'name')}}
            el-row(:gutter="24")
              el-col(:span="12") 时长：{{contract.contractProducts[0].count}}{{contract.contractProducts[0].productUnit}}
              el-col.tr(:span="12") 合同时间：{{contract.beginDate | dateFilter}} ~ {{contract.endDate | dateFilter}}
    add-contract(:visible.sync="modalObj.visible" :info="modalObj.info" :id="modalObj.id")
</template>
<script>
import { mapGetters } from 'vuex'
import Alert from '@/components/Basic/Alert'
import { dictMixin } from '@/mixins'
import { getContractsByBaby } from '../api'
import AddContract from './addContract'

const searchFields = [
  {
    key: 'sysChildName',
    label: '孩子名称'
  }
]

export default {
  components: {
    Alert,
    AddContract
  },
  mixins: [dictMixin],
  props: {
    visible: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      searchFields,
      searching: false,
      babyList: [],
      modalObj: {
        id: '',
        visible: false,
        info: {}
      }
    }
  },
  computed: {
    ...mapGetters(['curArea']),
    // 通过计算属性，对.sync进行转换，外部也可以直接使用visible.sync
    visibleDialog: {
      get () {
        return this.visible
      },
      set (val) {
        this.$emit('update:visible', val)
      }
    }
  },
  methods: {
    // 添加合同
    addHandle (info) {
      this.modalObj = {
        visible: true,
        id: info.id,
        info
      }
    },
    // 查询列表
    searchHandle (values = {}) {
      const { curArea } = this
      this.searching = true
      getContractsByBaby({ areaId: curArea.areaId, ...values }).then(res => {
        this.babyList = res || []
      }).finally(() => {
        this.searching = false
      })
    },
    $_handleCancel () {
      this.visibleDialog = false
    }
  }
}
</script>
<style lang="scss" scoped>
.babyBox{
  position: relative;
  h2 {
    margin-top: 0;
    margin-bottom: 10px;
    font-weight: normal;
    font-size: 16px;

    .addBtn {
      position: absolute;
      right: 12px;
      top: 12px
    }
  }

  h3 {
    margin-top: 0;
    margin-bottom: 0;
  }
}
</style>
